<template>
	<view class="page">
		<view class="header">
			<view style="">
				<image src="@/static/white_logo.png" mode=""></image>
				<view>
					<view>
						{{appName}}
					</view>
					<view style="margin-top: 10rpx;">
						{{appDes}}
					</view>
				</view>
			</view>
			
		</view>
		<view class="bg">

		</view>
		<view class="content">
			<!-- <piaoyiSwiper :imgList="imgList" :itemMargin="30" :autoplay="false" :interval="3000" :duration="1000"/> -->
			<!-- <image src="../../static/content.png" mode=""></image> -->
			<view style="display: flex;flex-direction: row;justify-content: space-between;">
				<image src="@/static/new1.png" mode="widthFix" style="border-radius: 20rpx;"></image>
				<view style="width: 20rpx;"></view>
				<image src="@/static/new.png" mode="widthFix" style="border-radius: 20rpx;"></image>
			</view>
		</view>
		<view class="btns" style="display: flex;flex-direction: row;justify-content: space-between;">
			<view @click="down('and')" style="margin-left: 20rpx;">
				<view class="icon">
					<image src="../../static/and.png" mode=""></image>
				</view>
				<view class="text">
					<view>Andriod版</view>
					<view>下载（{{version}}）</view>
				</view>
			</view>
			<view @click="down('ios')" style="margin-right: 20rpx;">
				<view class="icon">
					<image src="../../static/ios.png" mode=""></image>
				</view>
				<view class="text">
					<view>IOS版</view>
					<view>下载（{{version}}）</view>
				</view>
			</view>
		</view>
		<view class="wx" v-if="weixin">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appName: '零点管家', //app名称
				appDes: '零点娱乐酒吧管理系统', //app简述
				andHref: '', //安卓app下载地址
				iosHref: '', //苹果appStore链接
				weixin: false, //是否为微信内浏览器打开
				scheme: '', //scheme地址 如果已安装app直接打开，置空则不执行
				imgList: [
					'../../static/5ok.png',
					'../../static/1ok.png',
					'../../static/2ok.png'
				],
				version:'V1.0.0'
			}
		},
		onLoad() {
			// 动态设置页面标题
			this.setTitle()
			// 判断该页面是否为微信内置浏览器内打开 true>显示浏览器内打开引导
			this.isWX()
			// 获取当前app版本以及下载历史
			this.getAppUrl()
			// 如果需要通过scheme直接打开app
			this.openApp()

		},
		methods: {
			setTitle() {
				uni.setNavigationBarTitle({
					title: this.appName + 'APP下载'
				});
			},
			getAppUrl() {
				const _this = this
				uni.request({
					url: 'https://app.skunld.net/check/DownApp.php', // 接口地址
					method: 'POST',
					data: { // 请求参数
						action: 'appUrl',
						appId: '528211725406277'
					},
					success: (res) => { // 成功回调
						console.log('请求成功:', res.data);
						if (res.data.code == 0 && 'data' in res.data) {
							_this.andHref = res.data.data.app_android_url
							_this.iosHref = 'itms-apps://itunes.apple.com/app/id' + res.data.data.app_ios_id
							_this.version = 'V'+res.data.data.app_version
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					},
					complete: () => {

					}
				})
			},
			isWX() {
				let ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					this.weixin = true
				} else {
					this.weixin = false
				}
			},
			openApp() {
				if (this.scheme) {
					window.location = this.scheme
				}
			},
			down(type) {
				if (type == 'and') {
					window.location.href = this.andHref;
				} else {
					window.open(this.iosHref);
				}
			}
		}
	}
</script>

<style lang="less">
	@BgColor: #232323; //主题背景色

	.page {
		background-color: #f8f8f8;
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.header {
			width: 100vw;
			height: 350upx;
			background-color: @BgColor;
			display: flex;
			justify-content: center;
			>view{
				display: flex;
				flex-direction: row;
				padding-top: 100rpx;
				image {
					width: 120upx;
					height: 120upx;
					margin-right: 30upx;
				}
				>view {
					height: 120upx;
					color: #fff;
					font-weight: 700;
					display: flex;
					flex-direction: column;
					justify-content: center;
					view:nth-child(1) {
						font-size: 34upx;
					}
					view:nth-child(2) {
						font-size: 28upx;
					}
				}
			}
		
		}

		.bg {
			width: 100vw;
			height: 210upx;
			background-image: url(../../static/bg.png);
			background-size: 100%;
			background-position: center bottom;
			background-repeat: no-repeat;
			position: relative;
			left: 0;
			bottom: 160rpx;
		}

		.content {
			position: relative;
			top: 230rpx;
			transform: translateY(-54%);
			overflow: hidden;
			padding: 0 20rpx;
			image {
				width: 750upx;
				height: 750upx;
			}
		}

		.btns {
			position: fixed;
			bottom: 0;
			width: 100vw;
			// left: 20rpx;
			// right: 20rpx;
			height: 200upx;
			align-items: center;
			background: #000;
			>view {
				width: 340rpx;
				height: 120upx;
				background-color: @BgColor;
				color: #FFFFFF;
				display: flex;
				margin: 0 auto;
				border-radius: 15upx;
				box-shadow: 0 10upx 24upx -10upx @BgColor;
				;

				.icon {
					width: 120upx;
					height: 120upx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.text {
					display: flex;
					flex-direction: column;
					justify-content: center;

					view:nth-child(1) {
						font-size: 34upx;
					}

					view:nth-child(2) {
						font-size: 28upx;
					}
				}

				image {
					width: 50upx;
					height: 50upx;
				}
			}

			>view:nth-child(2) {
				margin-bottom: 0upx;
			}
		}

		.wx {
			position: fixed;
			left: 0;
			top: 0;
			background-color: rgba(0, 0, 0, .7);
			width: 100vw;
			height: 100vh;
			background-image: url(../../static/wx.png);
			background-size: 100%;
			background-position: center 100upx;
			background-repeat: no-repeat;
		}
	}
</style>